<template>
	<!-- pages/vip/vip.wxml -->
	<view>
		<!-- <view v-if="vipList.length"> -->
		<view style="position:relative;">
			<nav txtColor="#FFFFFF" image="../..https://oos-cn.ctyunapi.cn/front-end/static/back1.png" title="会员等级"
				:show_bol="false"></nav>
			<view class="header_bg"></view>
			<view :style="
          'padding-top:' +
          (widnowH <= 568 ? bar_Height + 50 : bar_Height + 55) +
          'rpx;'
        ">
				<view class="instructions" :style="
            'top:' +
            (widnowH <= 568 ? bar_Height + 50 : bar_Height + 55) +
            'rpx;'
          ">
					<!-- <text v-if="consumeMoney">消费{{ consumeMoney / 100 }}元获得{{
              equivalentIntegral
            }}消费积分</text> -->
					<!-- <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/instruction.png" class="instructions_img"></image> -->
				</view>
				<view class="swiper">
					<swiper previous-margin="33rpx" next-margin="33rpx" :circular="true" :current="current"
						@change="bindChange">
						<block>
							<swiper-item id="swiperList" :item-id="curLevelItem.levelId">
								<block>
									<image v-if="curLevelItem.levelId"
										:src="'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/vip_bg' + (curLevelItem.levelId) + '.png'">
									</image>
									<view class="vip_name">
										<image
											src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/vip_hg.png"
											class="vip_name_icon"></image>
										<view class="vip_type">{{ curLevelItem.levelName }}</view>
										<view class="vip_grade" v-if="status==2">当前等级</view>
									</view>
									<view class="swiper-item__bottom flex-row-between">
										<view class="bottom-left">
											<view style="font-size: 30rpx;">
												<text>{{ curLevelItem.curPoints||0}}</text>/{{curLevelItem.levelHighValue}}
											</view>
											<block>
												<view class="swiper-progress">
													<view class="swiper-progress__bg"
														:style="'width:' + curLevelItem.process + '%'"></view>
												</view>
												<view v-if="curLevelItem.process!=100">
													距离升级还需
													<text>{{ curLevelItem.differenceIntegral }}积分</text>
												</view>
											</block>
										</view>

										<view class="bottom-right" v-if="curLevelItem.process==100">
											<view>已经达到最高</view>
											<view>等级</view>
										</view>
									</view>
								</block>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<!-- 我的权益 -->
				<view class="rewardBox">
					<view class="title" :style="{ backgroundImage: 'url(' + titleBg + ')' }">我的权益</view>
					<view class="integralCouponList" v-if="marketCurrentEquityGroupVoList.length!=0">
						<view class="integralCouponItem" v-if="marketCurrentEquityGroupVoList.equityServeDiscountStr">
							<view class="box1">
								<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`">
								</image>
								<view class="text-1">服务优惠</view>
							</view>
							<view class="tip">{{marketCurrentEquityGroupVoList.equityServeDiscountStr}}</view>
						</view>
						<view class="integralCouponItem" v-if="marketCurrentEquityGroupVoList.equityBoundsStr">
							<view class="box1">
								<image :src="`${imgUrlBase2}/icon_jianglijin3703530708666233956.png`">
								</image>
								<view class="text-1">奖励金</view>
							</view>
							<view class="tip">{{marketCurrentEquityGroupVoList.equityBoundsStr}}</view>
						</view>
						<view class="integralCouponItem" v-if="marketCurrentEquityGroupVoList.serveFreeTimes">
							<view class="box1">
								<image :src="`${imgUrlBase2}/icon_mianfuwucishu1479319900652158668.png`">
								</image>
								<view class="text-1">免服务费次数</view>
							</view>
							<view class="tip">{{marketCurrentEquityGroupVoList.serveFreeTimes}}</view>
						</view>
						<view class="integralCouponItem" v-if="marketCurrentEquityGroupVoList.equityPointStr">
							<view class="box1">
								<image :src="`${imgUrlBase2}/icon_jifen2011325536646060104216.png`">
								</image>
								<view class="text-1">积分</view>
							</view>
							<view class="tip">{{marketCurrentEquityGroupVoList.equityPointStr}}</view>
						</view>
						<view class="integralCouponItem"  v-if="marketCurrentEquityGroupVoList.equityCouponStr">
							<view class="box1">
								<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`">
								</image>
								<view class="text-1">优惠券</view>
							</view>
							<view class="tip">{{marketCurrentEquityGroupVoList.equityCouponStr}}</view>
						</view>
					</view>
					<view class="integralCouponList" v-else>
						<view class="none">暂无数据</view>
					</view>
					<view class="shengyuEdu" v-if="curLevelItem.discountLimitCount">
						<view>本月服务费优惠剩余次数</view>
						<view>{{ curLevelItem.discountLimitCount }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="details">
			<view class="title">详细说明</view>
			<view class="activityLine"></view>
			<view class="content">
				<view>
					1、服务费优惠：付费会员期间，可享受服务费折扣
				</view>

				<view>
					2、奖励金：虚拟金额，可抵扣服务费，不可提现
				</view>
				<view>
					3、免服务费次数：可全额减免服务费次数
				</view>
				<view>
					4、积分：积分与成长等级会员关联，可享受成长等级会员权益
				</view>
				<view>
					5、优惠券：可用于订单金额减免
				</view>
			</view>
		</view>
		<view></view>
		<view></view>
		<!-- 最终解释权归平台所有 -->
		<!-- <view class="copy_right">
                <text>最终解释权归平台所有</text>
            </view> -->
	</view>
	</view>
	<!-- <view v-else> -->
	<!-- <view>
        <nav txtColor="#18181A" image="../..https://oos-cn.ctyunapi.cn/front-end/static/back.png" title="会员等级" :show_bol="false"></nav>
        <Upgrading text="暂无内容"></Upgrading>
    </view> -->
	</view>
</template>

<script>
	"use strict";
	import nav from "../../../components/nav/nav";
	import Upgrading from "../../../components/upgrading/upgrading";

	// exports.__esModule = true;

	var https_1 = require("./../../../api/https.js");
	import {
		getGrowthleById,
	} from '@/api/marketing/vip'
	const app = getApp();
	export default {
		components: {
			nav,
			Upgrading,
		},
		data() {
			return {
				imgUrlBase2: `${app.globalData.imgUrl}/group1/operateSchemeImage`,
				defaultColor: uni.getStorageSync("defaultColor_Green"),
				giftBlue_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/giftblue.svg`,
				giftGreen_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/giftgreen.svg`,
				giftPink_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/gift.svg`,
				chongzhi_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon_chongzhi.png`,
				car_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon_car.png`,
				chezhu_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon_chezhu.png`,
				chongdian_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon_chongdian.png`,
				chongzhirenwu_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon_chongzhirenwu.png`,
				guanggao_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon_guanggao.png`,
				haoyou_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon_haoyou.png`,
				vip_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon/icon-vip.png`,
				integralBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/integral-bg.png`,
				titleBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/title_bg.png`,
				icon_fuwuyouhui: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi/icon_fuwuyouhui.png`,
				icon_jianglijin: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi/icon_jianglijin.png`,
				icon_jifen: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi/icon_jifen.png`,
				icon_mianfuwucishu: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi/icon_mianfuwucishu.png`,
				icon_youhuiquan: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi/icon_youhuiquan.png`,
				vipList: [],
				current: 0,
				equivalentIntegral: null,
				consumeMoney: null,
				widnowH: 0,
				bar_Height: 0,
				level: 0,
				servicePackage: {
					rate: "",
					reward: "",
					freeCount: "",
				},

				curLevelItem: [],
				status: 1,
				marketCurrentEquityGroupVoList: [],
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			if (options.status) {
				this.status = options.status
			}
			this.getGrowthleInfo(options.id)
			this.bar_Height = parseInt(uni.getSystemInfoSync().statusBarHeight); //获得手机状态栏高度
			// this.servicePackageFun();
			this.memberGradeRule();
		},
		methods: {
			getGrowthleInfo(id) {
				getGrowthleById(id).then(res => {
					if (res.code == 200) {
						let list = res.data || {}
						if(list.curPoints>list.levelHighValue){
							list.curPoints=list.levelHighValue
						}
						if(this.status==1&&list.curPoints<list.levelHighValue){
							list.curPoints=0
						}
						list.process = ((list.curPoints || 0) / list.levelHighValue) * 100
						if (list.process >= 100) {
							list.process = 100;
						}
						list.nextLevelLowValue = list.levelHighValue + 1
						list.differenceIntegral = list.nextLevelLowValue - (list.curPoints || 0);
						if (list.differenceIntegral < 0) {
							list.differenceIntegral = 0;
						}
						// list
						console.log(list, '详情')
						this.curLevelItem = list || {};
						if(list.marketCurrentEquityGroupVoList&&list.marketCurrentEquityGroupVoList.length!=0){
							this.marketCurrentEquityGroupVoList=list.marketCurrentEquityGroupVoList[0]
						}
					}
				})
			},
			servicePackageFun: function() {
				var that = this;
				https_1
					.getServicePackage({})
					.then(function(res) {
						if (res.code == 0) {
							console.log(res.data, "这是会员数据");
							that.setData({
								vipList: res.data,
							});
						}
					})["catch"](function(err) {
						console.log(err);
					});
			},

			bindChange: function(e) {
				var current = e.detail.current;
				this.setData({
					current: current,
				});
			},

			memberGradeRule: function() {
				var that = this;
				https_1
					.getMemberGradeRule({})
					.then(function(res) {
						if (res.code == 0) {
							if (res.data.integralConfig) {
								that.setData({
									consumeMoney: res.data.integralConfig.consumeMoney,
									equivalentIntegral: res.data.integralConfig.equivalentIntegral,
								});
							}
						}
					})["catch"](function(err) {
						console.log(err);
					});
			},
		},
	};
</script>

<style lang="less">
	@import url("./vip.less");

	.giftsList {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.qdGift {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;

		>view:nth-of-type(1) {
			width: 90rpx;
			height: 90rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		>view:nth-of-type(2) {
			font-size: 26rpx;
			color: #606266;
			margin-top: 24rpx;
		}

		.tips {
			position: absolute;
			top: -25rpx;
			right: -60rpx;
			z-index: 2;
			width: 108rpx;
			height: 40rpx;
			background: #F7A14A;
			box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(250, 152, 48, 0.302);
			border-radius: 24rpx 24rpx 24rpx 0rpx;
			font-size: 20rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 40rpx;
		}
	}

	.details {
		width: 94%;
		min-height: 385rpx;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		padding: 32rpx;
		box-sizing: border-box;

		.tite {
			font-size: 32rpx;
			font-weight: 400;
			color: #303133;
			line-height: 32rpx;
		}

		.content {

			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #303133;

			>view {
				margin-top: 20rpx;
			}
		}
	}

	.activityTitle {
		width: 100%;
	}

	.activityLine {
		width: 100%;
		height: 1rpx;
		margin: 30rpx 0;
		background-color: #dcdfe6;
	}

	.rewardBox {
		width: 94%;
		margin: 16rpx auto;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #FFFFFF;

		.title {
			width: 240rpx;
			height: 57rpx;
			margin: -5rpx auto;
			font-size: 34rpx;
			text-align: center;
			line-height: 57rpx;
			font-weight: 400;
			color: #FFFFFF;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	.integralCouponList {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.none {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
	}

	.integralCouponItem {
		width: 220rpx;
		height: 160rpx;
		position: relative;

		.box1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 70%;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.text-1 {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
		}

		.tip {
			background: #F7A14A;
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: -8px;
			padding: 0 10rpx;
			left: 85rpx;
		}
	}

	.arrowClick {
		width: 80rpx;
		// height: 60rpx;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.shengyuEdu {
		width: 100%;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #606266;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>